<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<script src="../web-lib/jquery/dist/jquery.js"></script>
	<script src="../web-lib/effect/slide.js"></script>

<style>
	
	.box{
		width: 300px;
		height: 300px;
		margin: 100px auto;
		border: 1px solid grey;
		overflow: hidden;
		position: relative;
	}
	.lunbo1{
		width: 8000px;
		position: relative;
		left: -300px;
	}

	.lunbo1 li{
		float: left;
		width: 300px;
		height: 300px;
	}

	.lunbo1 li img{
		width: 100%;
		height: 100%;
	}

	.box2{
		width: 300px;
		height: 300px;
		margin: 100px auto;
		border: 1px solid grey;
		overflow: hidden;
		position: relative;
	}
	.lunbo2{
		width: 8000px;
		position: relative;
		left: -300px;
	}

	.lunbo2 li{
		float: left;
		width: 300px;
		height: 300px;
	}

	.lunbo2 li img{
		width: 100%;
		height: 100%;
	}

	.cont{
		position: absolute;
		bottom: 10px;
		right: 10px;
	}

	.cont li{
		float: left;
		width: 10px;
		height: 10px;
		background: skyblue;
		margin-left: 10px;
	}
	.cont li.cur{
		background: tomato;
	}

	.cont2{
		position: absolute;
		bottom: 10px;
		right: 10px;
	}

	.cont2 li{
		float: left;
		width: 10px;
		height: 10px;
		background: skyblue;
		margin-left: 10px;
	}
	.cont2 li.cur2{
		background: tomato;
	}
</style>
</head>
<body>

	
	<div class="box">
		<ul class="lunbo1">
			<li><a href="#"><img src="img/lunbo3.jpg"></a></li>
			<li><a href="#"><img src="img/lunbo1.jpg"></a></li>
			<li><a href="#"><img src="img/lunbo2.jpg"></a></li>
			<li><a href="#"><img src="img/lunbo3.jpg"></a></li>
			<li><a href="#"><img src="img/lunbo1.jpg"></a></li>
		</ul>
		<ul class="cont">
			
		</ul>
	</div>

	<div class="box2">
		<ul class="lunbo2">
			<li><a href="#"><img src="img/lunbo5.jpg"></a></li>
			<li><a href="#"><img src="img/lunbo3.jpg"></a></li>
			<li><a href="#"><img src="img/lunbo4.jpg"></a></li>
			<li><a href="#"><img src="img/lunbo5.jpg"></a></li>
			<li><a href="#"><img src="img/lunbo3.jpg"></a></li>
		</ul>
		<ul class="cont2">
			
		</ul>
	</div>

<script>
	$(function(){

		$.SlideEffect({
			"container": ".box",
			"main": ".lunbo1",
			"control" : ".cont",
			"cur": "cur"
		});

		$.SlideEffect({
			"container": ".box2",
			"main": ".lunbo2"
		});
	});
</script>
</body>
</html>